/* eslint-disable react/button-has-type */
/* eslint-disable no-shadow */
/* eslint-disable func-names */
/* eslint-disable no-unused-vars */
/* eslint-disable @typescript-eslint/no-unused-vars */
import React, { FC, useEffect, useState } from 'react';
import { connect } from 'dva';
import { Layout, Button, Tabs } from 'choerodon-ui';
import { Form, TextField, DatePicker, Pagination } from 'choerodon-ui/pro';
// import { PageHeaderWrapper } from 'hzero-boot/lib/components/Page';
import { LabelLayoutType } from 'choerodon-ui/pro/lib/form/Form';
import { SizeChangerPosition } from 'choerodon-ui/pro/lib/pagination/enum';
import { StateType, ListProps } from './typing';
import styles from './style.less';

const { Content, Header } = Layout;
const { TabPane } = Tabs;

interface planProps {
  dispatch: any;
  resourcesPlan: StateType;
  loading: boolean;
}

const ResourcesPlan: FC<planProps> = props => {
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const {
    dispatch,
    resourcesPlan: { list },
  } = props;
  useEffect(() => {
    dispatch({
      type: 'resourcesPlan/fetchList',
      payload: {
        page,
        pageSize,
      },
    });
  }, []);
  const changeTab = function(_newKey: any) {};
  // function sizeChangerRenderer({ text }: any) {
  //   return `${text} 条/页`;
  // }

  // function pagerRenderer(page: any, type: any) {
  //   switch (type) {
  //     case 'first':
  //       return <Icon type="fast_rewind" style={{ color: '#666' }} />;
  //     case 'last':
  //       return <Icon type="fast_forward" style={{ color: '#666' }} />;
  //     case 'prev':
  //       return <Icon type="navigate_before" style={{ color: '#666' }} />;
  //     case 'next':
  //       return <Icon type="navigate_next" style={{ color: '#666' }} />;
  //     case 'jump-prev':
  //     case 'jump-next':
  //       return '•••';
  //     default:
  //       return page;
  //   }
  // }

  function changePagination(page: number, pageSize: number) {
    dispatch({
      type: 'resourcesPlan/fetchList',
      payload: {
        page: page - 1,
        pageSize,
      },
    });
    setPage(page);
    setPageSize(pageSize);
  }
  return (
    // <PageHeaderWrapper title="资源计划">
    <div className={styles['resources-plan']}>
      <Layout displayName="">
        <Header displayName="" className={styles.header}>
          <div className={styles['header-top']}>
            <div className={styles['header-left']}>资源计划</div>
            <Button icon="add" type="primary" className={styles['header-right']}>
              新建
            </Button>
          </div>
          <div className={styles['header-bottom']}>
            <Tabs defaultActiveKey="1" onChange={newKey => changeTab(newKey)}>
              <TabPane tab="TASK 列表" key="1" />
              <TabPane tab="整经设备组" key="2" />
            </Tabs>
          </div>
        </Header>
        <Content displayName="" className={styles.content}>
          <div className={styles['content-detail']}>
            <Form labelLayout={'vertical' as LabelLayoutType} columns={4}>
              <TextField label="工序" />
              <TextField label="产品编号" />
              <DatePicker label="时间" range={['start', 'end']} name="date" />
              {/* <Col span={4} style={{ textAlign: 'right' }} className={styles.buttons}>
                <Button>切换设备</Button>
                <Button>清空</Button>
                <Button style={{ background: '#4F7DE7', color: 'white' }} type="primary">
                  查询
                </Button>
              </Col> */}
              <div className={styles.buttons}>
                <Button>切换设备</Button>
                <Button>清空</Button>
                <Button type="primary">查询</Button>
              </div>
            </Form>

            <div className={styles['content-detail-cards']}>
              {list.map((item: ListProps) => (
                <div className={styles['content-detail-card']}>
                  <div className={styles['content-detail-card-top']}>
                    <div className={styles['content-detail-card-content']}>
                      <span>{item.number}</span>
                      {item.status === 'Issued' && (
                        <button style={{ background: '#39C878', color: 'white' }}>已下达</button>
                      )}
                      {item.status === 'new' && (
                        <button style={{ background: '#4F7DE7', color: 'white' }}>新建</button>
                      )}
                      {item.status === 'UnIssued' && (
                        <button style={{ background: '#F8B303', color: 'white' }}>未下达</button>
                      )}
                    </div>
                    <div
                      className={styles['content-detail-card-content']}
                      style={{ paddingTop: 5 }}
                    >
                      <span>{item.code}</span>
                      {item.status === 'new' && (
                        <button style={{ background: '#FFFFFF', border: '1px solid #D9D9D9' }}>
                          改机
                        </button>
                      )}
                    </div>
                  </div>
                  <div className={styles['content-detail-card-bottom']}>
                    <div className={styles['content-detail-card-content']}>
                      <span>{item.key}</span>
                      <span>{item.date}</span>
                    </div>
                    <div
                      style={{ paddingTop: 5 }}
                      className={styles['content-detail-card-bottom-btn']}
                    >
                      <span>{item.number1}</span>
                      <span>{item.number2}</span>
                      <span>{item.date1}</span>
                      <span>{item.date2}</span>
                      <button style={{ background: '#FFFFFF', border: '1px solid #D9D9D9' }}>
                        整经
                      </button>
                    </div>
                  </div>
                </div>
              ))}
            </div>
            <div className={styles.pagination}>
              <Pagination
                showSizeChangerLabel={false}
                showTotal={false}
                showPager
                sizeChangerPosition={'right' as SizeChangerPosition}
                // sizeChangerOptionRenderer={sizeChangerRenderer}
                // itemRender={pagerRenderer}
                total={500}
                pageSize={pageSize}
                page={page}
                onChange={changePagination}
              />
            </div>
          </div>
        </Content>
      </Layout>
    </div>
    // </PageHeaderWrapper>
  );
};

export default connect(
  ({
    resourcesPlan,
    loading,
  }: {
    resourcesPlan: StateType;
    loading: {
      models: { [key: string]: boolean };
    };
  }) =>
    ({
      resourcesPlan,
      loading: loading.models.resourcesPlan,
    } as any)
)(ResourcesPlan);
